<template>
	<view class="bkj" :style="colorStyle">
		<view class='productList'>
			<view class="top">
				<!-- <view></view> -->
			</view>
			<view class="tops">
			<view class="flex align-center biaoqian">
				<view v-for="item in crt" @click="qiehuan(item.id)">
					<view class="tit">{{item.cate_name}}</view>
					<view class="time" :class="{'fff':item.seckillState==1}">{{item.seckillState==0?'已结束':item.seckillState==1?'热抢中':'10:00'}}</view>
				</view>
			</view>
			<view class="flex seckillState_time">
				{{is_action?'距离本场结束':'距离本场开始'}}：<view class="times">{{limit_h}}</view>：<view class="times">{{limit_m}}</view>：
				<view class="times">{{limit_s}}</view>：<view class="times">{{limit_micro}}</view>
			</view></view>
			<view class='list acea-row row-between-wrapper on' v-if="productList.length>0">
				<view class='item' :class='is_switch==true?"":"on"' hover-class='none'
					v-for="(item,index) in productList" :key="index" @click="godDetail(item)">
					<view class='pictrue' :class='is_switch==true?"":"on"'>
						<image :src='item.image' :class='is_switch==true?"":"on"'></image>
						<span class="pictrue_log_class" :class="is_switch === true ? 'pictrue_log_big' : 'pictrue_log'"
							v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</span>
						<span class="pictrue_log_class" :class="is_switch === true ? 'pictrue_log_big' : 'pictrue_log'"
							v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</span>
						<span class="pictrue_log_class" :class="is_switch === true ? 'pictrue_log_big' : 'pictrue_log'"
							v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</span>
					</view>
					<view class='text' :class='is_switch==true?"":"on"'>
						<view class='name line1'>{{item.store_name}}</view>
						<view class='flex' style="align-items: center;margin: 50rpx 0 15rpx;font-size: 26rpx;">
							<image style="width: 28rpx;margin-right: 10rpx;" src="https://appimg.derunhuatang.com/logo/wechat/dou.png" mode="widthFix"></image>
							<text class='num'>{{item.give_integral}}</text>个</view>
						
						
						<view class='money flex  font-color on' style="justify-content: space-between;">
							<view>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
							<view class="flex" style="justify-content: space-between;align-items: center;">
								<view style="font-size:20rpx;color: #12C287;">双倍健康豆</view>
								<view style="width: 112rpx;text-align: center;color: white;margin-left: 40rpx;">购买</view>
							</view>
						</view>
						
					</view>
				</view>
				<view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
					<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
				</view>
			</view>
		</view>
		<view class='noCommodity' v-if="productList.length==0 && where.page > 1">
			<view class='emptyBox'>
				<image :src="imgHost + '/statics/images/no-thing.png'"></image>
			</view>
			<recommend :hostProduct="hostProduct"></recommend>
		</view>
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
	</view>
</template>

<script>
	import home from '@/components/home';
	import {
		getProductslist,
		getProductHot
	} from '@/api/store.js';
	import recommend from '@/components/recommend';
	import {
		mapGetters
	} from "vuex";
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {HTTP_REQUEST_URL} from '@/config/app';
	import colors from '@/mixins/color.js';
	export default {
		computed: mapGetters(['uid']),
		components: {
			recommend,
			home
		},
		mixins:[colors],
		data() {
			return {
				is_action:1,
				crt:[{'cate_name': "周日",'id': 24},
				{'cate_name': "周一",'id': 22},
				{'cate_name': "周二",'id': 21},
				{'cate_name': "周三",'id': 19},
				{'cate_name': "周四",'id': 18},
				{'cate_name': "周五",'id': 17},{'cate_name': "周六",'id': 16}],
				imgHost:HTTP_REQUEST_URL,
				productList: [],
				is_switch: false,
				where: {
					sid: 0,
					keyword: '',
					priceOrder: '',
					salesOrder: '',
					news: 0,
					page: 1,
					limit: 20,
					cid: 0,
				},limit_h: '00',
				limit_m: '00',
				limit_s: '00',
				limit_micro: '00',
				price: 0,
				stock: 0,
				nows: false,
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`),
				title: '',
				hostProduct: [],
				hotPage: 1,
				hotLimit: 10,
				hotScroll: false,
			};
		},
		onLoad: function(options) {
			new Date().getHours() > 9 ? (this.is_action = 1, this.getTimeLimit(new Date(new Date().toLocaleDateString())
				.getTime() + 86400000)) : (this.getTimeLimit(new Date(new Date().toLocaleDateString()).getTime() +
				32400000));
			for(let i in this.crt){
				if (new Date().getDay() < i) {
					this.crt[i].seckillState = 2;
				} else if (new Date().getDay() > i) {
					this.crt[i].seckillState = 0;
				} else {
					this.crt[i].seckillState = 1;
					// this.where.sid = this.crt[i].id || 0;
					this.$set(this.where, 'sid', this.crt[i].id || 0);
					this.title = options.title || '';
					this.$set(this.where, 'keyword', options.searchValue || '');
					this.$set(this.where, 'productId', options.productId || '');
					this.get_product_list();
				}
			}
		},
		methods: {
			qiehuan(e){
					this.is_data = e;
					this.where.cid=e;
					this.get_product_list();
			},
			
			// 去详情页
			godDetail(item) {
				goShopDetail(item, this.uid).then(res => {
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${item.id}`
					})
				})
			},
			searchSubmit: function(e) {
				let that = this;
				that.$set(that.where, 'keyword', e.detail.value);
				that.loadend = false;
				that.$set(that.where, 'page', 1)
				this.get_product_list(true);
			},
			/**
			 * 获取我的推荐
			 */
			get_host_product: function() {
				let that = this;
				if (that.hotScroll) return
				getProductHot(
					that.hotPage,
					that.hotLimit,
				).then(res => {
					that.hotPage++
					that.hotScroll = res.data.length < that.hotLimit
					that.hostProduct = that.hostProduct.concat(res.data)
					// that.$set(that, 'hostProduct', res.data)
				});
			},
			//点击事件处理
			set_where: function(e) {
				switch (e) {
					case 1:
						// #ifdef H5
						return history.back();
						// #endif
						// #ifndef H5
						return uni.navigateBack({
							delta: 1,
						})
						// #endif
						break;
					case 2:
						if (this.price == 0) this.price = 1;
						else if (this.price == 1) this.price = 2;
						else if (this.price == 2) this.price = 0;
						this.stock = 0;
						break;
					case 3:
						if (this.stock == 0) this.stock = 1;
						else if (this.stock == 1) this.stock = 2;
						else if (this.stock == 2) this.stock = 0;
						this.price = 0
						break;
					case 4:
						this.nows = !this.nows;
						break;
				}
				this.loadend = false;
				this.$set(this.where, 'page', 1);
				this.get_product_list(true);
			},
			//设置where条件
			setWhere: function() {
				if (this.price == 0) this.where.priceOrder = '';
				else if (this.price == 1) this.where.priceOrder = 'asc';
				else if (this.price == 2) this.where.priceOrder = 'desc';
				if (this.stock == 0) this.where.salesOrder = '';
				else if (this.stock == 1) this.where.salesOrder = 'asc';
				else if (this.stock == 2) this.where.salesOrder = 'desc';
				this.where.news = this.nows ? 1 : 0;
			},
			//查找产品
			get_product_list: function(isPage) {
				let that = this;
				that.setWhere();
				if (that.loadend) return;
				if (that.loading) return;
				if (isPage === true) that.$set(that, 'productList', []);
				that.loading = true;
				that.loadTitle = '';
				getProductslist(that.where).then(res => {
					let list = res.data;
					let productList = that.$util.SplitArray(list, that.productList);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.$set(that, 'productList', productList);
					that.$set(that.where, 'page', that.where.page + 1);
					if (!that.productList.length) this.get_host_product();
				}).catch(err => {
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				});
			},
			getTimeLimit(e) {
					let that = this
					that.timer = setInterval(() => {
			
						let now = new Date().getTime()
						let diff_number = e - now
							// console.log("diff_number-->",diff_number)
						if (diff_number <= 0) {
			
							this.clearTimer();
			
							this.seckillState = 0
			
						} else {
							let d = parseInt(diff_number / 1000 / 60 / 60 / 24), //总毫秒除以一天的毫秒 得到相差的天数
								h = parseInt(diff_number / 1000 / 60 / 60 - (24 * d)), //然后取完天数之后的余下的毫秒数再除以每小时的毫秒数得到小时 
								m = parseInt(diff_number / 1000 / 60 - (24 * 60 * d) - (60 *
									h)), //减去天数和小时数的毫秒数剩下的毫秒，再除以每分钟的毫秒数，得到分钟数 
								s = parseInt(diff_number / 1000 - (24 * 60 * 60 * d) - (60 * 60 * h) - (60 *
									m)); //得到最后剩下的毫秒数除以1000 就是秒数，再剩下的毫秒自动忽略即可
							let hm = Math.floor((diff_number - (24 * 60 * 60 * 1000 * d) - (60 * 60 * 1000 * h) - (60 *
								1000 * m) - (s * 1000)) / 10);
							if (hm < 10) {
								hm = "0" + hm;
							}
							if (s < 10) {
								s = "0" + s;
							}
							if (m < 10) {
								m = "0" + m;
							}
							if (h < 10) {
								h = "0" + h;
							}
			
							//statetime = statetime + ' '+ h +':'+m+':'+s+":"+hm
							//statetime = m+':'+s+":"+hm
							//this.timer && this.clearTimer()
							//this.statetime = statetime
							that.limit_h = h
							that.limit_m = m
							that.limit_s = s
							that.limit_micro = hm
							//console.log(that.limit_m)
						}
			
			
			
			
					}, 90);
			},
		},
		onPullDownRefresh() {

		},
		
		onReachBottom() {
			if (this.productList.length > 0) {
				this.get_product_list();
			} else {
				this.get_host_product();
			}

		}
	}
</script>

<style scoped lang="scss">
	.bkj{background: linear-gradient(180deg, #B7E79E 0%, #20C589 100%);min-height: 100vh;}
	.top{
		background: url(https://appimg.derunhuatang.com/logo/wechat/jkdly.png) no-repeat;
		background-size: 100%;
		width: 100%;height: 500rpx;
	}
	.seckillState_time {
		
		// width: 100%;
		text-align: center;
		justify-content: center;
		align-items: center;
		color: #333;
		font-weight: 500;
		font-size: 24rpx;
	background-color: white;
border-radius: 14rpx;margin: 35rpx 20rpx 0;padding: 10rpx 0;
		.times {
			width: 45rpx;
			text-align: center;
			background: #12C287;
			border-radius:6rpx;
			padding: 2rpx 6rpx;
			margin-right: 6rpx;
			color: #fff;
		}
	}
	.tops{
		background: url(https://appimg.derunhuatang.com/logo/wechat/jkdly1.png) no-repeat;
		background-size: 100%;height: 310rpx;
		padding: 80rpx 0 0;
		margin-top: -90rpx;position: relative;
	}
	.biaoqian{
		
		
		justify-content: space-between;padding: 10rpx 20rpx;text-align: center;
		font-size: 24rpx;color: white;
		.time{padding: 0 10rpx;margin-top: 20rpx;}
		.fff{
			color: #12C287;background: #FFFFFF;
		border-radius: 20rpx;padding: 0 5rpx;
		}
	}
	.productList .search {
		width: 100%;
		height: 86rpx;
		padding-left: 23rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}

	.productList .search .input {
		width: 640rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.productList .search .input input {
		width: 548rpx;
		height: 100%;
		font-size: 26rpx;
	}

	.productList .search .input .placeholder {
		color: #999;
	}

	.productList .search .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}

	.productList .search .icon-pailie,
	.productList .search .icon-tupianpailie {
		color: #12C287;
		width: 62rpx;
		font-size: 40rpx;
		height: 86rpx;
		line-height: 86rpx;
	}

	.productList .nav {
		height: 86rpx;
		color: #454545;
		position: fixed;
		left: 0;
		width: 100%;
		font-size: 28rpx;
		background-color: #fff;
		margin-top: 86rpx;
		top: 0;
		z-index: 9;
	}

	.productList .nav .item {
		width: 25%;
		text-align: center;
	}

	.productList .nav .item.font-color {
		font-weight: bold;
	}

	.productList .nav .item image {
		width: 15rpx;
		height: 19rpx;
		margin-left: 10rpx;
	}

	.productList .list {
		padding: 0 20rpx;
		margin-top: 30rpx;
	}

	.productList .list.on {
		// background-color: #fff;
		// border-top: 1px solid #f6f6f6;
	}

	.productList .list .item {
		width: 345rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.productList .list .item.on {
		width: 100%;
		display: flex;
		// border-bottom: 1rpx solid #f6f6f6;
		padding: 15rpx;
		margin: 0 0  20rpx;
	}

	.productList .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 345rpx;
	}

	.productList .list .item .pictrue.on {
		width: 220rpx;
		height: 220rpx;
	}

	.productList .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.productList .list .item .pictrue image.on {
		border-radius: 6rpx;
	}

	.productList .list .item .text {
		padding: 20rpx 17rpx 26rpx 17rpx;
		font-size: 30rpx;
		color: #333;
	}

	.productList .list .item .text.on {
		width: 450rpx;
		padding: 10rpx 0 0 22rpx;
	}

	.productList .list .item .text .money {
		font-size: 26rpx;
		font-weight: bold;padding: 5rpx 10rpx;
		margin-top: 8rpx;background: url(https://appimg.derunhuatang.com/logo/wechat/jkdly2.png) no-repeat;
		background-size: 100%;
	}

	.productList .list .item .text .money.on {
		// margin-top: 50rpx;
	}

	.productList .list .item .text .money .num {
		font-size: 36rpx;font-weight: bold;
	}

	.productList .list .item .text .vip {
		font-size: 22rpx;
		color: #aaa;
		margin-top: 7rpx;
	}

	.productList .list .item .text .vip.on {
		margin-top: 12rpx;
	}

	.productList .list .item .text .vip .vip-money {
		font-size: 24rpx;
		color: #282828;
		font-weight: bold;
	}

	.productList .list .item .text .vip .vip-money image {
		width: 46rpx;
		height: 21rpx;
		margin-left: 4rpx;
	}

	.noCommodity {
		background-color: #fff;
		padding-bottom: 30rpx;
		.emptyBox{
			text-align: center;
			padding-top: 20rpx;
			.tips{
				color: #aaa;
				font-size: 26rpx;
			}
			image {
				width: 414rpx;
				height: 304rpx;
			}
		}
	}
</style>
